<template>
	<view class="content">
		<view class="user">
			<img class="avatar" :src="avatarUrl" alt="user" @click="handleLogin">
			<view class="left" @click="handleLogin">
				<view class="username">{{ userStore.nickname??'请登录/注册你的账号' }}</view>
				<view v-if="userStore.level" class="lv">
					<uni-icons type="vip-filled" color="#ea7f3f" class="vip-icon"></uni-icons>
					普通会员
				</view>
				<view style="font-size: 1rem;" v-else>点击登录</view>
			</view>
		</view>
		<view class="order-card" style="margin-top: -80px;" @click="handlePromptLogin">
			<uni-card :style="{'pointer-events':userStore.id?'initial':'none'}">
				<template #title>
					<view
						style="border-bottom: 1px #EBEEF5 solid;padding: 10px 0;display: flex;justify-content: space-between;">
						<text style="font-weight: 700;">我的订单</text>
						<navigator style="color: #a7a7a5;font-size: 14px;"
							:url="'/pages/order/order?mode=' + OrderListPageMode.All">
							<text>全部订单</text>
							<uni-icons type="right" :size="14" color="#a7a7a5"></uni-icons>
						</navigator>
					</view>
				</template>
				<uni-grid :column="4" :highlight="false" :show-border="false">
					<uni-grid-item>
						<navigator class="grid-item-box" :url="'/pages/order/order?mode=' + OrderListPageMode.UNPAID">
							<uni-badge class="count" :text="orderCount.unpaid" size="small" />
							<uni-icons custom-prefix="iconfont" type="icon-wallet" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">待支付</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box"
							:url="'/pages/order/order?mode=' + OrderListPageMode.NOT_SHIPPED">
							<uni-badge class="count" :text="orderCount.not_shipped" size="small" />
							<uni-icons custom-prefix="iconfont" type="icon-gift" :size="32" color="#a7a7a5"></uni-icons>
							<text class="text">待配送</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box"
							:url="'/pages/order/order?mode=' + OrderListPageMode.IN_DELIVERY">
							<uni-badge class="count" :text="orderCount.in_shipped" size="small" />
							<uni-icons custom-prefix="iconfont" type="icon-truck1" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">配送中</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box" :url="'/pages/order/order?mode=' + OrderListPageMode.DONE">
							<uni-icons custom-prefix="iconfont" type="icon-package-check" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">已完成</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box" :url="'/pages/order/order?mode=' + OrderListPageMode.REFUNDED">
							<uni-icons custom-prefix="iconfont" type="icon-income" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">已退款</text>
						</navigator>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
		<view @click="handlePromptLogin">
			<uni-card :style="{'pointer-events':userStore.id?'initial':'none'}">
				<uni-grid :column="4" :highlight="false" :show-border="false">
					<uni-grid-item>
						<navigator class="grid-item-box" url="/pages/user/info">
							<uni-icons custom-prefix="iconfont" type="icon-user" :size="32" color="#a7a7a5"></uni-icons>
							<text class="text">用户信息</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box" url="/pages/user/address">
							<uni-icons custom-prefix="iconfont" type="icon-location" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">地址管理</text>
						</navigator>
					</uni-grid-item>
					<uni-grid-item>
						<navigator class="grid-item-box" url="/pages/user/contact">
							<uni-icons custom-prefix="iconfont" type="icon-headset-one" :size="32"
								color="#a7a7a5"></uni-icons>
							<text class="text">联系客服</text>
						</navigator>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		useUserStore
	} from "@/stores/user.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		OrderListPageMode
	} from "@/constants/index.js"

	const userInfo = ref(null)

	const userStore = useUserStore()
	const handleLogin = () => {
		if (!userStore.id) {
			userStore.login(() => {
				loadOrderCount()
			})
		}
	}

	const avatarUrl = computed(() => {
		if (userStore.avatar) {
			return SERVER_URL + userStore.avatar
		} else {
			return "/static/images/user.png"
		}
	})

	const orderCount = ref({
		unpaid: 0,
		not_shipped: 0,
		in_shipped: 0
	})

	const loadOrderCount = () => {
		uni.request({
			url: SERVER_URL + '/customer/order/count',
			method: "GET",
			header: {
				"authorization": userStore.token
			},
			success: (res) => {
				if (res.statusCode === 200) {
					orderCount.value = res.data
				}
			}
		});
	}

	onShow(() => {
		if (userStore.id) {
			loadOrderCount()
		}
	})

	const handlePromptLogin = () => {
		if (!userStore.id) {
			uni.showToast({
				icon: "none",
				title: "请先登录"
			})
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #F2F6FD;

		.user {
			background-color: #f73a3a;
			padding: 24px;
			display: flex;
			padding-bottom: 100px;

			.avatar {
				width: 64px;
				height: 64px;
				object-fit: cover;
				border: 2px solid #fff;
				border-radius: 50%;
			}

			.left {
				color: #fff;
				flex: 1;
				font-size: 1.2rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 12px;

				.username {
					margin-bottom: 6px;
				}

				.lv {
					font-size: 12px;
					color: #ea7f3f;
					background-color: #fee4bf;
					width: fit-content;
					padding: 2px 4px;
					border-radius: 4px;
					display: flex;
					align-items: center;

					.vip-icon {
						margin-right: 2px;
					}
				}
			}
		}


		.grid-item-box {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.count {
				position: absolute;
				top: 0;
				right: 0;
			}

			:deep(.uni-icons) {
				line-height: 1;
			}

			.text {
				margin-top: 6px;
			}
		}
	}
</style>